
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js九宫格文字抽奖代码 - 站长素材</title>

<style>
	*{
		padding: 0;
		margin: 0;
	}
	#prize{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 100px;
		display: block;
		width: 320px;
		height: 40px;
		background-color: rgb(255, 255, 255);
		border-radius: 2px;
		box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 2px;
		letter-spacing: 2px;
		text-align: center;
		line-height: 40px;
	}
	div{
		width: 330px;
		height: 330px;
		position: relative;
		left: 50%;
		top:50%;
		transform:translate(-50%,50%);
	}
	div>span{
		float: left;
		width: 100px;
		height: 100px;
		margin: 5px;
		background: rgb(22, 186, 236);
		color: white;
		text-align: center;
		line-height: 100px;
		
	}
	div>span:nth-of-type(4){
		position: relative;
		left: 220px;
	}
	div>span:nth-of-type(5){
		position: relative;
		left: 110px;
		top:110px;
	}
	div>span:nth-of-type(6){
		position: relative;
		left: -110px;
		top:110px;
	}
	div>span:nth-of-type(8){
		position: relative;
		left: -110px;
		top:-110px;
	}
	div>span:nth-of-type(9){
		cursor: pointer;
		background: rgb(255, 148, 61);
		position: relative;
		left: -110px;
		top:-110px;
	}
	div .aa{
		background: rgb(78, 78, 78);
	}
</style>

</head>
<body>

<p id='prize'></p>

<div>
	<span class="aa">手机</span>
	<span>平板</span>
	<span>电磁炉</span>
	<span>洗衣机</span>
	<span>衣柜</span>
	<span>冰箱</span>
	<span>电脑</span>
	<span>电视</span>
	<span>开始</span>
</div>

<script>
var prize= document.getElementById('prize');
var spans = document.querySelectorAll("div>span");
	function start(){
		// if(typeof(num)=='undefined'){
		//     // spans[num].classList.remove('aa'); // 清空上一次结果
		//     console.log('hhh')
		// }
		spans.forEach(function(el,index){
			if(index!=0){
				el.classList.remove('aa'); // 清空上一次结果
			}
		})
		prize.textContent='';   
		spans[8].style.cursor="not-allowed";
		spans[8].onclick=null;
		let num=-1;      //奖品序号
		let times=parseInt(Math.random()*(30-18+1)+18,10);
		let time=0;     //当前的旋转次数
		let speed=100;  //转盘速度
			timer = setInterval(function(){
			num++;
			time++;
			if(num > 7){
				num = 0;
				spans[0].classList.add('aa');
				spans[7].classList.remove('aa');
			}else if(num==0){
				spans[num].classList.add('aa');
				spans[7].classList.remove('aa');
			}else{
				spans[num].classList.add('aa');
				spans[num-1].classList.remove('aa');
			} 
			if(time>times){
				spans[8].onclick=start;
				spans[8].style.cursor="pointer";
				clearInterval(timer);
				prize.textContent='恭喜您抽中了'+spans[num].textContent+'!!!';
			}
		},speed)
	}
spans[8].onclick=start;
</script>

</body>
</html>